<template>
  <base-layout>
    <template #searchPanel>
      <search-panel
        :addPer="'team:create'"
        :selectPer="'team:page'"
        addTitle="新增班组"
        @insert="add"
        @search="search"
        :showSearchButton="true"
        :showAddButton="true"
      >
        <Job-shop clearable v-model="filters.storeId" placeholder="所属门店" />
        <el-select clearable v-model="filters.teamTypeDictId" placeholder="班组类别" style="width: 200px">
          <el-option
            v-for="item in dict['班组类型']"
            :key="item.index"
            :value="item.value"
            :label="item.text"
          />
        </el-select>
        <el-input v-model="filters.teamName" clearable placeholder="小组名称" style="width: 200px" />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{row}">
          <i class="el-icon-edit" title="编辑" style="cursor: pointer;" v-permission="'team:update'" @click="temEdit(row)"></i>
          <i class="el-icon-delete" title="删除" style="color:red; margin-left: 20px;cursor: pointer" v-permission="'team:delete'" @click="handleDataDelete(row)"></i>
        </template>
      </data-table>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base';
import { page,deleteTeam } from '@/api/after-sale/personnel/team'
import { getDict } from '@/utils'
export default {
  mixins: [
    baseMixin({
      idName: 'id',
      findData: page,
      deleteData: deleteTeam,
      dataName: ['content', 'totalRecords'],
      format(res) {
        return res.map(data => {
          data.statusValue = data.status ? '正常' : '禁用'
          return data
        })
      }
    })
  ],
  data() {
    return {
      filters: {
        storeId: '',
        teamTypeDictId: '',
        teamName: ''
      },
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '班组名称', value: 'teamName', type: 'text' },
        { name: '班组类别', value: 'teamTypeValue', type: 'text' },
        { name: '人员数量', value: 'num', type: 'text' },
        { name: '组长', value: 'groupUserName', type: 'text' },
        { name: '组长联系方式', value: 'groupPhone', type: 'text' },
        { name: '状态', value: 'statusValue', 
          type: 'switch',
          valueId: 'status',
          // action: (row) => {
          //   changeStatus(row.id).then((res) => {
          //     this.search()
          //     if(res.success){
          //       this.$message.success('')
          //     }
          //   })
          // },
        },
        { name: '备注', value: 'remark', type: 'text' }
      ],
      dict: [],
      types: [
        { id: '1', value: '测试收支种类1' },
        { id: '2', value: '测试收支种类2' }
      ]
    }
  },
  mounted() {
    this.dict = getDict(['班组类型'])
  },
  methods:{
    //列表查询
    search(form){
      this.searchOptions = this.filters;
        this.currentPage = 1
        this.setTableData()
    },
    add(){
      this.$router.push({ path: '/personnel/adddTeam',query:{id:''} })
    },
    temEdit(row){
      this.$router.push({ path: '/personnel/editTeam',query:{id:row.id} })
    }
  }
}
</script>
